<template>
   <!-- ---页面整体布局--- -->
<el-container class="home-container">
  <el-header>
    <div class="logo">
      <img src="../assets/future.png" alt="future.png">
      <span>未来小组管理系统</span>
    </div>
    <div  class="personal">
    <span class="hello">你好，欢迎***！</span>
     <img src="../assets/heading.png" alt="heading" class="heading">
     
<el-button plain>退出</el-button>
    </div>
    
  </el-header>
  <!-- 页面主要布局 -->
  <el-container  class="maincontainer">
    <!-- 左侧导航栏 -->
    <el-aside  width="200px"> 
      <el-row><el-col>
    
    <el-menu
      default-active="2"
      background-color="#333744"
      text-color="#fff"
      active-text-color="#ffd04b">
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>签到</span>
        </template>
        </el-submenu>
          <el-submenu index="2">
        <template slot="title">
          <i class="el-icon-film"></i>
          <span>课表</span>
        </template>
        </el-submenu>  <el-submenu index="3">
        <template slot="title">
          <i class="el-icon-document"></i>
          <span>学习计划</span>
        </template>
        </el-submenu>
     
    </el-menu>
  </el-col>
</el-row>
</el-aside>
    <!-- 右边主要内容 -->
    <el-main>Main</el-main>
  </el-container>
</el-container>
</template>

<script>
export default {
    name:'TopHeader',
}
</script>

<style lang="less" scoped>
.home-container{
  height: 100%;
}
  .el-header{
      height: 60px;
      background: #373d41;
      display: flex;
      align-items: center;
    justify-content: space-between;
    padding-left: 0px;
    color: #fff;
    font-size: 18px;
    
  }
  .logo{
    display: flex;
    align-items: center;
   
      img{
    width: 78px;
    height: 60px;
    }
     span{
       margin-left: 10px;
     }
   
  }
 .maincontainer{
   width: 100%;
 }
 .el-aside{
   width: 200px;
   background-color: #333744;

 }
 .el-main{
  
   background-color: #eaedf1;
 }
 @media screen and (max-width: 600px) {
   .hello{
     display: none;
   }
 }
 .personal{
   display: flex;
   align-items: center;
   .hello{
     margin-right: 80px;
     color: #fff;
     font-size: 16px;
   }
   @media screen and (max-width: 800px) {
    .heading{
      display: none;
    }
    .el-button{
       display: none;
    }
}

   .heading{
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-right: 80px;
  }

 }
 @media screen and (max-width: 200px) {
   .el-aside{
     width: 80px;
   }
 }

</style>